<template>
  <div>
    <el-row>
        <el-col :span="12">
          <el-col :span="10">
            <el-input v-model="pageConfig.name_contains" placeholder="请输入关键字" clearable prefix-icon="el-icon-user" />
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-search" @click.native="searchBtnFn">搜索</el-button>
          </el-col>
        </el-col>
      </el-row>
    <el-card>
        <el-table border :data="employeeList">
          <el-table-column label="姓名"  prop="name"/>
          <el-table-column label="头像" prop="username" sortable="">
            <template v-slot="obj">
              <img class="avatar" v-fiximg  :src="obj.row.image" alt="" >
            </template>
          </el-table-column>
          <el-table-column label="电话"  prop="phone"/>
          <el-table-column label="描述"  prop="desc"/>
          <el-table-column label="邮箱"  prop="email"/>
        </el-table>
  </el-card>
  </div>
</template>

<script>
import {jingjiren} from "@/api/user"
export default {
data(){
  return{
    employeeList:[],
    pageConfig: {
        _limit: 10,
       _start: 0,
       name_contains:''
      },
  }
},
created(){
this.getJingjiren()
},
methods:{
  async getJingjiren(){
  const res= await jingjiren(this.pageConfig)
  console.log(25,res);
  this.employeeList=res.data
  },
  searchBtnFn(){
    this.getJingjiren()
  }
}
}
</script>

<style lang="less" scoped>
.avatar {
  width: 180px;
  height: 88px;
  // 有个 css 可以控制图片宽高比
  // 两个常用选项 cover 是在保持宽高比的情况下覆盖全部内容
  // contain 是在保持宽高比的情况下, 尽可能显示全部图片
  object-fit: cover;
}
</style>

